<template>

  <div :class="['marginalCard', (row.status ==='1' || row.status ==='2') ? 'active':row.status === '0'?'':'error',row._active ? 'card-active':'']" @click.stop="itemClick">
    <div class="card-item">
      <span class="label">调整区划代码:</span>
      <span class="value">{{ row.areaCode }}</span>
    </div>
    <div class="card-item">
      <span class="label">调整区划名称:</span>
      <span class="value">{{ row.areaName }}</span>
    </div>
    <div class="separation"></div>
    <div class="card-bottom">
      <span class="b-label">{{row.workName}}</span>
      <span class="date">{{ row.createTime }}</span>
    </div>
    <div class="card-footer">
      <slot name="action" :row="row"></slot>
    </div>
    <div class="card-tag-box">
      <div :class="['card-tag',(row.status ==='1' || row.status ==='2') ? 'active':row.status === '0'?'':'error']">
        <div class="tag-d"></div>
        <span class="tag-label">{{getStatusName()}}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Prop} from 'vue-property-decorator';

@Component
export default class MarginalCard extends Vue {
  @Prop() private row!: any;
  @Prop() private status!: any;

  getStatusName(){
    const {statusName,approvalStatus} = this.row
    if(this.status === 'approval'){
      return approvalStatus === '0' ? '未审核' : '待审核'
    }
    if(this.status === 'report'){
      return '待上报'
    }
    return statusName
  }

  checkedHandler(){
    (this as any).$bus.$emit('marginalCheckedHandler',this.row);
  }
  itemClick(){
    this.$emit('click',this.row)
    this.$store.dispatch('updateMapPolygon',this.row.polygon || "")
    this.checkedHandler();
  }
}
</script>
<style lang="scss" scoped>
.marginalCard{
  background: #f7f7f7;
  border-radius: 4px;
  padding: 16px;
  cursor: pointer;
  position: relative;
  font-size: 14px;
  margin-bottom: 12px;
  cursor: pointer;
  &.card-active{
    border: 1px solid #36c55b;
  }
  &.active{
    &:after{
      background: #76c48a;
    }
    .card-item{
      .value{
        color: #76c48a;
      }
    }
    .separation{
      background: #76c48a;
    }
  }
  &.error{
    &:after{
      background: #ff4d4d;
    }
    .card-item{
      .value{
        color: #ff4d4d;
      }
    }
    .separation{
      background: #ff4d4d;
    }
  }
  &:after{
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 70%;
    left: 2px;
    background: #88888888;
  }
  .card-item{
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    gap: 4px;
    .label{
      color: #333333;
    }
    .value{
      color: #999999;
    }
  }
  .separation{
    background: #88888888;
    height: 1px;
    width: 100%;
    margin: 8px 0;
  }
  .card-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .b-label{
      color: #333333;
    }
    .date{
      color: #333333;
    }
  }
  .card-footer{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
  }
  .card-tag-box{
    position: absolute;
    right: 16px;
    top: 15px;
    .card-tag{
      display: flex;
      align-items: center;
      gap: 4px;
      &.active{
        .tag-d{
          background: #76c48a;
        }
        .tag-label{
          color: #76c48a;
        }
      }
      &.error{
        .tag-d{
          background: #ff4d4d;
        }
        .tag-label{
          color: #ff4d4d;
        }
      }
      .tag-d{
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #999999;
      }
      .tag-label{
        color: #999999;
      }
    }
  }
}
</style>
